<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点评</title>
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${path}/css/reviews/Reviews.css">
    <link href="${path}/plugins/Hplus/css/font-awesome.css" rel="stylesheet">
    <link href="${path}/plugins/Hplus/css/animate.css" rel="stylesheet">
    <link href="${path}/plugins/Hplus/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css">

    <link href="${path}/plugins/Hplus/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="${path}/css/index/index.css">
</head>
<body>
<%@include file="../nav/navbarheader.jsp"%>

<div class="row" style="margin-top: 100px;margin-left: 50px;" >
    <ul>
        <li><a>
            <span>${shop.province}</span>
        </a>
            &nbsp;
            <span class="glyphicon glyphicon-chevron-right">

                </span>
            &nbsp;
        </li>
        <li><a>
            <span>${shop.city}</span>
        </a>
            &nbsp;
            <span class="glyphicon glyphicon-chevron-right">

                </span>
            &nbsp;
        </li>
        <li><a>
            <span>${shop.shopName}</span>
        </a>
            &nbsp;
        </li>
    </ul>
</div>
<div class="main-body">
    <!-- 左边界面 -->
    <div class="main-left" >
        <div class="left-top">
            <h1 style="justify-content: left;color: black;font-weight:bold;margin-left:-30px;"  class="layui-anim layui-anim-up layui-anim-down">
                ${shop.shopName}</h1>
            <div class="describe" >
                <span >人均:${shop.consumption}</span>
                <span >评分:${shop.shopScore}</span>
            </div>
            <div class="describe">
                <span >地址：${shop.province}${shop.city}${shop.place}${shop.area}</span>
            </div>
            <div class="describe">
                <span >电话：${shop.shopTelnumber}</span>
            </div>
        </div>
        <hr>
        <div class="review-body">
            <div class="title">
                我要评价
            </div>
            <div class="metric-star">
                <div class="metric-star-item">
                    总体评价：
                    <div id="test2" class="row"></div>
                </div>

                <div class="metric-star-item">
                    口味：
                    <div id="test3" class="row"></div>
                </div>

                <div class="metric-star-item">
                    环境：
                    <div id="test4" class="row"></div>
                </div>

                <div class="metric-star-item">
                    服务：
                    <div id="test5" class="row"></div>
                </div>

                <div class="metric-star-item">
                    评价:
                    <div style="margin-left: 70px;margin-top: -15px;">
                        <textarea name="content" required lay-verify="required" placeholder="请填写评价" class="layui-textarea" style="width: 300px;"></textarea>
                    </div>
                </div>
                <div class="metric-star-item">
                    上传图片集：
                    <div class="input-grounp upload-img-group picture-set" style="width: 100%;">
                        <label style="white-space: nowrap;"></label>
                        <input type="hidden" name="imgs" class="multiple_show_img" value="" id="images">
                        <div class="layui-upload ml10">
                            <button type="button" class="layui-btn" id="multiple_img_upload">点击上传</button>
                            <div class="layui-upload-list" id="div-slide_show"></div>
                        </div>
                    </div>
                </div>
                <div class="metric-star-item">
                    人均
                    <!-- <input type="text" style="width: 40px;">&nbsp元 -->
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input" style="margin-left: -10px;">
                    </div>
                </div>
                <div style="margin-left: 115px; margin-top: 20px;">
                    <button type="button" id="reviewSub" class="layui-btn">
                        发布
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 右边界面 -->
    <div class="main-right">
        <div>
            <h3>附近商户推荐</h3>
        </div>
        <!-- 推荐商户 -->
        <div >
            <%--                <div  class="recommend">--%>
            <%--                    <div>--%>

            <%--                        <a href=""><img src="../imgs/reviews/g-1.png" alt=""></a>--%>

            <%--                        <a href=""><img src="${path}/imgs/reviews/g-1.png" alt=""></a> --%>

            <%--                    </div>--%>
            <%--                   --%>
            <%--                    <div >--%>
            <%--                        <a class="r-photo" href="#">青梅酒肆(国创园店)</a> --%>
            <%--                        <div style="margin-left: 10px;">--%>
            <%--                            <img src="${path}/imgs/yyk/haoping.png" alt="" style="width: 80px;height: 17px;">--%>
            <%--                        </div>--%>
            <%--                        <div style="margin-top: 10px;">--%>
            <%--                            <span  class="r-address" >升州路/集庆路</span>--%>
            <%--                            <span class="r-price">人均120元</span>--%>
            <%--                        </div>--%>
            <%--                    </div>--%>
            <%--                </div>--%>

        </div>
        <div class="more">
            <a href="#" class="layui-btn">
                查看更多推荐
            </a>
        </div>

    </div>
</div>
<%--<input type="hidden" name="userIdHid" value="${user.id}">--%>
<!-- 底部导航 -->
<div class="bottom" style="bottom: -550px;">
    <div class="bottominner">
        <div class="btmlogo">
            <img src="${path}/imgs/index/bottomicon.svg" alt="">
        </div>
        <div class="btmc1">
            © 2022 TripAdvisor LLC 保留所有权利。<br>
            <ul>
                <li><a href="">使用条款</a></li>
                <li><a href="">隐私和Cookie声明</a></li>
                <li><a href="">同意使用Cookie</a></li>
                <li><a href="">网站地图</a></li>
                <li><a href="">网站工作原理</a></li>
            </ul>
            <div class="btmc1-1">
                网站的此版本通常面向中文使用者，除非有针对其国家或地区的特定网站版本存在。 您可以使用下拉式菜单访问 Tripadvisor 网站面向特定国家或地区的其他版本。
                <a href="">更多</a>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="shopIdHid" value="${shop.id}">
<input type="hidden" name="orderIdHid" value="${orderId}">
<script src="${path}/plugins/jquery.min.js"></script>
<script src="${path}/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="${path}/plugins/layui/layui.js" charset="utf-8"></script>
<script src="${path}/js/reviews/Reviews.js"></script>
<script src="${path}/js/index/login.js"></script>
<script src="${path}/js/index/register.js"></script>
<script src="${path}/js/index/index.js"></script>
<script>
    var multiple_images = []; //用于存储多张图片的地址

    $(() => {
        let userId = $("input[name=userIdHid]").val();
        let shopId = $("input[name=shopIdHid]").val();
        var index, layedit, layer;
        let pictureId =
            layui.use(['form', 'layedit', 'upload'], function () {
                layedit = layui.layedit,
                    form = layui.form,
                    upload = layui.upload;
                layedit.set({
                    uploadImage: {
                        url: '/fr/uploadFileList/'+userId+'/'+shopId+'',//上传图片的接口
                        type: 'post',
                        dataType: 'json',
                        success: function (res) {
                            console.log(res.code)
                        }
                    }
                });
                upload.render({
                    elem: '#multiple_img_upload',
                    url: '/fr/uploadFileList/'+userId+'/'+shopId+'',//上传图片的接口
                    multiple: true,
                    before: function (obj) {
                        obj.preview(function (index, file, result) {
                            $('#multiple_img_upload').before('<img src="' + result + '" alt="' + file.name + '" title="点击删除" class="layui-upload-img" style="width: 160px;height: 140px;margin-right:18px;border:1px dashed darkgray;vertical-align:top;margin-bottom:10px;" οnclick="delMultipleImgs(this)">&nbsp;')
                        });
                    },
                    done: function (res) {
                        if (res.code > 0) {
                            multiple_images.push(res.data.src);
                            $('.multiple_show_img').val(multiple_images);
                            if (multiple_images.length>=6){
                                $("#multiple_img_upload").hide();
                            }
                        } else {
                            layer.msg(res.message);
                        }
                    }
                });
            })
    })
</script>
<script>
    $("#reviewSub").click(function () {
        let generalComment = $("#test2").text().length<3? $("#test2").text().substring(0,1):$("#test2").text().substring(0,3);
        let flavor = $("#test3").text().length<3? $("#test3").text().substring(0,1):$("#test3").text().substring(0,3);
        let environment = $("#test4").text().length<3? $("#test4").text().substring(0,1):$("#test4").text().substring(0,3);
        let service = $("#test5").text().length<3? $("#test5").text().substring(0,1):$("#test5").text().substring(0,3);
        let content = $("textarea[name=content]").val();
        let userId = $("input[name=userIdHid]").val();
        let shopId = $("input[name=shopIdHid]").val();
        let orderId = $("input[name=orderIdHid]").val();
        let form_data = {
            generalComment:generalComment,
            flavor:flavor,
            environment:environment,
            service:service,
            content:content,
            userId:userId,
            shopId:shopId,
            orderId:orderId
        }
        $.ajax({
            type: 'post',
            url: '/fr/addReview',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(form_data),
            success: function () {
                window.location.href = "http://localhost:8081/fr/storeInfo/enter/"+shopId+"";
            }
        })
    })
</script>
</body>
</html>